<template>
    <el-card style="max-width: 480px; margin: 240px auto;" >
      <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="账号" prop="loginName">
        <el-input v-model="ruleForm.loginName" />
      </el-form-item>
  
     <el-form-item label="密码" prop="loginPwd">
        <el-input v-model="ruleForm.loginPwd" show-password />
      </el-form-item>
  
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          登录
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  
  import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
  import { useCounterStore } from "@/stores/counter";
  import readhttp from '@/router/readhttp';
  import router from '@/router';
   var pinia= useCounterStore()
  
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
    "loginName": "",
  "loginPwd": ""
  })
  
  const locationOptions = ['Home', 'Company', 'School']
  
  const rules = reactive<FormRules>({
    loginName: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      //{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    loginPwd: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'blur',
      },
    ],
  
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
        readhttp.post('api/Read/GetUser',ruleForm).then(res=>{
          if(res.data.code==200)
        {
          ElMessage.success(res.data.message)
           pinia.login.token=res.data.data.token
           pinia.login.userId=res.data.data.userId
           pinia.login.userName=res.data.data.userName
           pinia.login.loginName=res.data.data.loginName
           pinia.login.loginPwd=res.data.data.loginPwd
           pinia.login.roleName=res.data.data.roleName
  
          router.push('HomeView')
        }
        else
        {
          ElMessage.error(res.data.message)
        }
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  </script>